<template>
	<div class="activity_promote">
		<header>
			<h2>市场活动推广报名</h2>
			<p>请先选择推广平台</p>
			<span @click="goB">返回活动列表</span>
		</header>
		<div class="content" v-loading="loading">
			<el-tabs v-model="activeName" @tab-click="selTab">
				<el-tab-pane v-for="items in allData" :key="items.cid" :label="items.catname" :name="''+items.cid">
					<!-- 宝店列表 -->
					<div class="store_lists1" v-if="indexs===0">
						<div class="store_list1" @mouseout="outs" @mouseover="overs(item.ad_doc_id)" v-for="(item,index) in items.data" :key="index">
							<h6>{{ item.sitename }}</h6>
							<p v-html="item.excerpt"></p>
							<img :src="item.face_path" alt="">
							<div class="overs" v-if="selStoreId === item.ad_doc_id">
								<h2>{{ item.sitename }}</h2>
								<p v-html="item.excerpt"></p>
								<button @click="goDetail(item.ad_doc_id)">平台详情</button>
								<button @click="goPromote(item)">选择在此推广</button>
							</div>
						</div>
					</div>
					<!-- 详情 -->
					<div class="store_detail1" v-if="indexs===1">
						<div v-if="detailData.length>0">
							<div class="store_detail_top">
								<h1>{{ detailData[0].title }}</h1>
								<p class="go_back1" @click="indexs=0">返回</p>
							</div>
							<div class="detail" v-html="detailData[0].content"></div>							
						</div>
						<div v-else v-loading="loading"></div>
					</div>
					<!-- 推广 -->
					<div class="promote_lists1" v-if="indexs===2">
						<div class="noshow_join" v-if="indexss===0">
							<div class="go_back1" @click="indexs=0">返回</div>
							<div class="store_info1" v-if="selShopArr.length>0">
								<img :src="selShopArr[0].face_path" alt="">
								<p>
									<span>当前选择：{{ selShopArr[0].sitename }}</span>
									<span @click="indexs=0">更换平台></span>
								</p>
								<h2>选择合适您的推广种类</h2>
							</div>
							<div class="switch_types1">
								<div class="switch_type1" :class="{selType1:promoteIndex===1}" @click="switchPromote(1)">
									<img src="../../assets/images/manage/activityPromote/storeP.png" alt="">
									<h5>宝店推广</h5>
									<p>店铺推广最直接和最有效的方式<br/>快速提高产品的销量</p>
								</div>
								<div class="switch_type1" :class="{selType1:promoteIndex===2}" @click="switchPromote(2)">
									<img src="../../assets/images/manage/activityPromote/groupP.png" alt="">
									<h5>推广团购</h5>
									<p>将您的折扣、优惠等信息最速度进行推广</p>
								</div>
								<div class="switch_type1" :class="{selType1:promoteIndex===3}" @click="switchPromote(3)">
									<img src="../../assets/images/manage/activityPromote/goodsP.png" alt="">
									<h5>推广商品</h5>
									<p>直接将您的产品展示在消费者面前<br/>快速产生消费</p>
								</div>
							</div>
							<div class="promote_goods">
								<div class="goods_list" v-if="spreadData.length>0" v-for="item in spreadData" :key="item.id" @mouseover="goodsOver(item.id)" @mouseout="goodsOut">
									<img :src="item.facePath" alt="">
									<div class="text">
										<p>{{ item.title }}</p>
										<p>最大报名人数：{{ item.maxJoinCount }}</p>
									</div>
									<div class="goods_hover" v-if="goodsIndex===item.id">
										<button @click="activeJoin(item.id)">活动报名</button>
									</div>
								</div>
								<div class="no_promote" v-if="noPromote">
									<img src="../../assets/images/manage/sameCity/noData.png" alt="" />
									<p>暂无数据</p>
								</div>
							</div>
						</div>
						<!-- 报名 -->
						<div class="show_join" v-if="indexss===1">
							<div class="join_top">
								<div class="join_top_left">
									<img :src="selShopArr[0].face_path" alt="">
									<p>{{ selShopArr[0].sitename }}</p>
								</div>
								<div class="join_top_right">
									<div class="join_time">
										<div class="join_price" v-if="actDetailData[0].price===0">
											<p>价格：<span>￥{{ actDetailData[0].price }}</span></p>
											<p>限时免费</p>
										</div>
										<div class="join_price" v-else>
											<p>价格：<span style="text-decoration:none;">￥{{ actDetailData[0].price }}</span></p>
										</div>
										<div class="join_remain_time">
											<p v-if="dateObj.s !== ''">报名时间剩余：{{ dateObj.d }}天{{ dateObj.h }}时{{ dateObj.m }}分{{ dateObj.s }}秒</p>
											<p v-if="dateObj.s === ''">报名已结束</p>
										</div>
									</div>
									<button v-if="actDetailData[0].is_join===0&&dateObj.s !== ''" @click="joins">立即报名</button>
									<button v-if="actDetailData[0].is_join===1&&dateObj.s !== ''" style="background:#909399;cursor:default;">已报名</button>
									<button v-if="actDetailData[0].is_join===2&&dateObj.s !== ''" @click="joins">已报名,未支付</button>
									<button v-if="dateObj.s === ''" style="background:#909399;cursor:default;">报名时间已结束</button>
									<button @click="indexss=0">返回</button>
								</div>
							</div>
							<el-dialog title="" :modal="false" :visible.sync="dialogVisible" width="50%">
								<p style="font-size:22px;font-weight:100;">报名成功！请等待审核，审核结果会以短信的形式通知到您的手机上！</p>
							</el-dialog>
							<div class="join_details">
								<div class="join_img">
									<img :src="actDetailData[0].previewPath" alt="" />
								</div>								
								<div class="join_detail">
									<div class="join_infos">
										<p><span>活动名称：</span>{{ actDetailData[0].title }}</p>
										<p><span>推广类型：</span>{{ actDetailData[0].join_type }}</p>
										<p><span>当前报名人数：</span>{{ actDetailData[0].join_count }} / {{ actDetailData[0].maxJoinCount }}</p>
										<p><span>开始时间：</span>{{ actDetailData[0].startTime*1000 | filterTimesss }}</p>
										<p><span>结束时间：</span>{{ actDetailData[0].endTime*1000 | filterTimesss }}</p>
									</div>
									<div style="text-align:left;margin:20px 0 -10px 0;">活动规则：<span v-html="actDetailData[0].ruleContent"></span></div>
									<div v-if="promoteIndex===1||promoteIndex===2">
										<h5 style="color:#000;margin-left:0px;text-align:left;">参与宝店：{{ data.title }}</h5>										
									</div>
									<div v-if="promoteIndex===3">
										<h5>请选择要推广的商品</h5>
										<div class="join_upload" v-if="actDetailData[0].is_join===0">
											<img v-if="selGoodsData.length===0" @click.stop="autoClick" class="uploadI" src="../../assets/images/manage/activityPromote/uploadImg.png" alt="">
											<div class="have_img" v-else>
												<img @click.stop="autoClick" :src="selGoodsData[0].face_path" alt="" />
												<p>{{ selGoodsData[0].title }}</p>
											</div>
										</div>
										<div class="join_upload" v-else-if="actDetailData[0].is_join===1">
											<img v-if="selGoodsData.length===0" style="cursor:default;" class="uploadI" src="../../assets/images/manage/activityPromote/uploadImg.png" alt="">
											<div class="have_img" v-else>
												<img :src="selGoodsData[0].face_path" alt="" />
												<p>{{ selGoodsData[0].title }}</p>
											</div>
										</div>
										<div class="join_upload" v-else>
											<img v-if="selGoodsData.length===0" style="cursor:default;" class="uploadI" src="../../assets/images/manage/activityPromote/uploadImg.png" alt="">
											<div class="have_img" v-else>
												<img :src="selGoodsData[0].face_path" alt="" />
												<p>{{ selGoodsData[0].title }}</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
		<!-- 选择推广商品dialog -->
		<el-dialog title="" :visible.sync="showDialog" width="730" style="border-radius:6px;" :show-close="false">			
			<div class="have_goods">				
				<div class="select_imgs">
					<h6>请选择要推广的商品：</h6>
					<div class="nav_lists">
						<div class="nav_list" v-for="item in navData" :key="item.id" :class="{sel: navIndex === item.id}" @click="selNav(item)">{{ item.cat_name }}</div>						
					</div>
					<div class="model_datas">
						<div class="model_data" v-for="(item,index) in gData" :key="index" @click="selSec(item)">
							<div class="model_img">
								<img :src="item.face_path" alt="" />
								<img class="sel" v-if="selGoodsData.length>0&&selGoodsData[0].id===item.id" src="../../assets/images/manage/sameCity/selected.png" alt="" />
							</div>
						</div>
						<div class="no_goods" v-if="noGoods">
							<p>暂无数据</p>
							<!-- <p @click="goAdd">前往添加</p> -->
						</div>
					</div>					
					<div class="buttons">
						<button @click="ensures">确认</button>
						<button @click="cancels">取消</button>
					</div>
				</div>
			</div>
		</el-dialog>			
		<!-- 选择支付方式 -->
		<el-dialog
		title=""
		:visible.sync="dialog3"
		width="50%"		
		center>
			<div class="payments">
				<p>请选择以下支付方式</p>
				<div class="sel_payways">
					<p @click="ensure3(2)"><img src="../../assets/images/manage/activityPromote/zfb.png" alt=""></p>
					<p @click="ensure3(3)"><img src="../../assets/images/manage/activityPromote/weixinpay.png" alt=""></p>
					<p @click="ensure3(1)" class="disable1"><span>余额支付</span><span>可用0元</span></p>					
				</div>				
			</div>			
		</el-dialog>
		<!-- 支付帮助 -->
		<el-dialog
		title=""
		:visible.sync="dialog4"
		:close-on-click-modal="false"
		width="50%"		
		center>
			<div class="payments_help">
				<div class="close">
					<img @click="close4" src="../../assets/images/manage/activityPromote/close.png" alt="">
				</div>
				<h5>请在新开的页面完成支付。</h5>
				<div class="pay_finish" v-if="isFinishedPay">
					<img src="../../assets/images/manage/activityPromote/finish.png" alt="">
					<p>如已经完成支付，请点击：</p>
					<button @click="finishPay">已完成支付</button>
				</div>	
				<div class="pay_finish" v-if="!isFinishedPay">
					<img src="../../assets/images/manage/activityPromote/help.png" alt="">
					<p>如付款遇到问题，你可以：</p>
					<button @click="continuePay">重新支付</button>
				</div>
				<div class="go_help">
					<p @click="goHelp">查看支付帮助</p>
					<span></span>
					<span></span>
				</div>			
			</div>			
		</el-dialog>	
		<!-- 模拟表单 -->
		<form action="" method="post" id="form1" target="_blank"></form>
		<!-- 微信二维码 -->
		<el-dialog
		title=""
		:visible.sync="dialog5"		
		width="50%"		
		center>
			<div class="weixinTe">请使用微信扫一扫完成支付</div>
			<div class="weixin">
				<img style="max-width:500px;" :src="weixinURL" alt="">	
				<!-- <img style="max-height:500px;" src="../../assets/images/abao/banner.jpg" alt="">		 -->
			</div>			
		</el-dialog>		
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie.js';	
	export default {
		name: 'activity_promote',
		props: ['data'],
		data() {
			return {				
				loading: true,
				allData: [],
				activeName: '1',
				selStoreId: 0,
				selShopArr: [], //选中的宝店
				detailData: [],
				spreadData: [],
				indexs: 0,
				indexss: 0,
				promoteIndex: 1,
				goodsIndex: -1,
				dialogVisible: false,
				lenImg: 0,
				imgArrs: [],
				dateObj: {
					d: '',
					h: '',
					m: '',
					s: ''
				},
				showDialog: false,
				actDetailData: [], //活动推广详情
				pgoodsData: [], //推广商品列表
				selGoodsData: [], //选中的推广商品
				noPromote: false,												
				dialog3: false,						
				payParams: '',
				dialog4: false,		
				isFinishedPay: false,	
				showCheck: '',	
				weixinURL: '',
				weixinCODE: '',
				dialog5: false,
				navData: [],
				navIndex: 0,
				gData: [],	
				page3: 1,	
				pageSize3: 500,
				noGoods: false					
			}
		},
		components: {
			
		},
		computed: {

		},
		created() {
			clearInterval(this.showCheck);
		},
		mounted() {
			this.getStore();			
		},
		methods: {
			goB(){
				this.$emit('goBack');
			},
			//市场活动推广报名 店铺列表
			getStore() {
				let obj = {};
				obj.uid = getCookie('UID');
				obj.token = getCookie('TOKEN');
				this.$axiosGet('/platform/service/showstore.json', obj, true).then(res => {
					this.loading = true;
					if(res.code === 200) {
						this.allData = res.data;
						this.activeName = '' + res.data[0].cid;
						this.loading = false;
					}
				})
			},
			selTab() {
				this.detailData = [];
				this.indexs = 0;
			},
			getNav() {
				let obj = {};
				obj.token = getCookie('TOKEN');
				obj.uid = getCookie('UID');
				obj.shop_id = this.data.id;				
				obj.flag_id = 1;
				this.$axiosGet('/social-ads/adCampaign/getAppCate.json', obj, true).then(res => {
					if (res.code === 200) {
						this.navData = res.data;
						this.navIndex = res.data[0].id;											
						this.getG(); 
					}					
				});
			},
			selNav(obj) {
				this.navIndex = obj.id;
				this.page3 = 1;
				this.gData = [];
				this.getG();				
			},
			selSec(arr) {
				this.selGoodsData = [];
				this.selGoodsData.push(arr);	
				this.showDialog = false;			
			},
			getG() {						 	
				this.noGoods = false;	
				let obj = {};
				obj.token = getCookie('TOKEN');
				obj.uid = getCookie('UID');
				obj.shop_id = this.data.id;				
				obj.flag_id = 1;
				obj.cat_id = this.navIndex;
				obj.page = this.page3;
				obj.limit = this.pageSize3;
				this.$axiosGet('/social-ads/adCampaign/getProm.json', obj, true).then(res => {
					if (res.code === 200) {						
						 this.gData = res.data;
					} else if (res.code === 404) {
						this.noGoods = true; 
						this.gData = [];											
					}					
				});
			},
			//倒计时
			getRTime() {
				let str = this.format(this.actDetailData[0].endTime * 1000);
				str = str.replace(/-/g, '/');
				let time1 = new Date().getTime();
				let time2 = new Date(str).getTime();
				let time3 = time2 - time1;
				if(time3 <= 0) {
					this.dateObj = {
						d: '',
						h: '',
						m: '',
						s: ''
					};				
				} else {
					this.$set(this.dateObj, 'd', this.checkTime(Math.floor(time3 / 1000 / 60 / 60 / 24)));
					this.$set(this.dateObj, 'h', this.checkTime(Math.floor(time3 / 1000 / 60 / 60 % 24)));
					this.$set(this.dateObj, 'm', this.checkTime(Math.floor(time3 / 1000 / 60 % 60)));
					this.$set(this.dateObj, 's', this.checkTime(Math.floor(time3 / 1000 % 60)));
				}
			},
			//鼠标移入
			overs(id) {
				this.selStoreId = id;
			},
			//鼠标移出
			outs() {
				this.selStoreId = 0;
			},
			//详情
			goDetail(id) {
				this.goTop();				
				this.detailData = [];
				this.loading = true;
				this.indexs = 1;
				this.selStoreId = id;
				let obj = {};
				obj.uid = getCookie('UID');
				obj.token = getCookie('TOKEN');
				obj.ad_doc_id = this.selStoreId;
				this.$axiosGet('/platform/service/storedetail.json', obj, true).then(res => {
					if(res.code === 200) {
						this.loading = false;
						this.detailData.push(res.data);
					}
				})
			},
			//推广
			goPromote(arr) {
				this.indexs = 2;
				this.noPromote = false;
				this.spreadData = [];
				this.loading = true;
				if(arr) {
					this.selShopArr = [];
					this.selShopArr.push(arr);
				}
				let obj = {};
				obj.uid = getCookie('UID');
				obj.token = getCookie('TOKEN');
				obj.shop_id = this.selShopArr[0].shop_id;
				obj.joinType = this.promoteIndex;
				this.$axiosGet('/platform/service/storePromotion.json', obj, true).then(res => {
					if(res.code === 200) {
						if(res.data.length === 0){
							this.noPromote = true;	
						}
						this.spreadData = res.data;
						this.loading = false;
					}else if(res.code === 404){
						this.noPromote = true;
						this.loading = false;
					}
				})
			},
			switchPromote(id) {
				this.promoteIndex = id;
				this.goPromote();
			},
			goodsOver(id) {
				this.goodsIndex = id;
			},
			goodsOut() {
				this.goodsIndex = -1;
			},
			//活动报名
			activeJoin(id) {	
				this.detail_id = id;			
				//活动报名详情
				let obj = {};
				obj.uid = getCookie('UID');
				obj.token = getCookie('TOKEN');
				obj.id = id;
				obj.shop_id = this.data.id;
				this.$axiosGet('/platform/service/promotionDetaill.json', obj, true).then(res => {
					if(res.code === 200) {
						//is_join 0-未报名 1-已报名已支付 2-已报名未支付
						this.actDetailData = res.data;
						this.selGoodsData = [];
						if (this.actDetailData[0].goods_face_path) {
							this.selGoodsData.push({face_path:this.actDetailData[0].goods_face_path});
						}
						this.indexss = 1;
						setInterval(() => {
							this.getRTime();
						}, 500);
					}
				})
			},			
			//选中推广商品
			selGood(arr) {
				this.selGoodsData = [];
				this.selGoodsData.push(arr);
			},
			//立即报名
			joins() {																									
				let obj = {};
				obj.uid = getCookie('UID');
				obj.token = getCookie('TOKEN');
				obj.joinType = this.promoteIndex;
				obj.store_promotion_activitie_id = this.actDetailData[0].id;
				// 当joinType为1时 此itemId为 应用号id 当joinType为2时 itemId为 团购券id当joinType为3时 itemId为 商品id
				if(this.promoteIndex === 1){
					obj.itemId = this.data.id;
					obj.title = this.data.title;
				}else if(this.promoteIndex === 2){
					
				}else if(this.promoteIndex === 3){					
					if(this.selGoodsData.length === 0){
						this.$alert('请选择推广商品','提示');
						return;
					}					
					obj.itemId = this.selGoodsData[0].id;
					obj.title = this.selGoodsData[0].title;
				}	
				obj.shop_id = this.data.id;
				obj.store_promotion_activitie_title = this.actDetailData[0].title;				
				//console.log(obj);return;	
				if (this.actDetailData[0].is_join !== 1) {
					obj.prom_id = this.actDetailData[0].prom_id;
					obj.pay_status = 1 //给后台一个标识，代表未支付
				} 				
				this.$axiosGet('/platform/service/joinActivities.json',obj,true).then(res => {
					if(res.code === 200){						
						this.activeJoin(this.detail_id);																		
						this.payParams = res.data;												
						this.dialog3 = true;						
					}
				})										
			},
			//自动点击
			autoClick() {				
				this.showDialog = true;
				this.getNav();
			},
			//将0-9的数字前面加上0，例1变为01
			checkTime(i) {
				if(i < 10) {
					i = "0" + i;
				}
				return '' + i;
			},
			ensures() {
				this.showDialog = false;
			},
			cancels() {				
				this.showDialog = false;
			},
			goAdd(){
				this.$emit('goAddG')
			},
			format(val) {
				let y = new Date(val).getFullYear();
				let m = new Date(val).getMonth() + 1 >= 10 ? new Date(val).getMonth() + 1 : '0' + (new Date(val).getMonth() + 1);
				let d = new Date(val).getDate() >= 10 ? new Date(val).getDate() : '0' + new Date(val).getDate();
				return y + "-" + m + "-" + d;
			},			
			//确定支付
			ensure3(val) {									
				let type = '';
				let self = this;
				if (val === 1) {
					type = 'balance';
				}else if (val === 2) {
					type = 'Alipay';
				}else {
					type = 'Wechat';
				}										
				this.$payOrder(type,this.payParams.id,'platform.promotionactivity').then(res => {					
					if (res.code === 200) {																										
						if (val === 2) { //支付宝							
							//window.open(res.data); //用这个浏览器会拦截，改为表单提交	
							this.dialog3 = this.dialog5 = false;
							this.dialog4 = true;
							let form1 = document.getElementById('form1');
							form1.setAttribute('action', res.data);							
							form1.submit();																																																						
						}else if (val === 3) { //微信
							let obj = {};						
							obj.code = res.data.code;	
							obj.url = res.data.url;
							this.weixinURL = res.data.url;
							this.weixinCODE = res.data.code;
							this.dialog3 = false;
							this.dialog4 = false;
							this.dialog5 = true;																																
						}else if (val === 1) { //余额

						}
						self.showCheck = setInterval(() => {
							self.checkStatus(res.id);
						}, 3000);
					}										
				});
			},
			close4() {
				this.dialog3 = false;
				this.dialog4 = false;
				clearInterval(this.showCheck);
			},
			//完成支付
			finishPay() {
				this.dialog3 = false;
				this.dialog4 = false;				
				clearInterval(this.showCheck);
			},			
			//继续支付
			continuePay() {
				this.dialog3 = true;
				this.dialog4 = false;
			},			
			//轮询活动付款状态
			checkStatus(ids) {				
				let obj = {};
				obj.uid = getCookie('UID');
				obj.token = getCookie('TOKEN');	
				obj.id = ids;			
				this.$axiosGet('/payment/pays/checkpaystatus.json', obj, true).then( res => {	
					//data.code  支付状态0未支付,1支付成功，-1已退款，-2已取消	
					if (res.code === 200) {
						if (res.data.code === 1) { //完成支付
							this.dialog4 = true;
							this.dialog3 = this.dialog5 = false;
							this.isFinishedPay = true;
							this.$set(this.actDetailData[0], 'is_join', 1);
							clearInterval(this.showCheck);
						} else if (res.data.code === 1) {
							this.isFinishedPay = false;
						}
					}								
				});
			},
			//查看帮助
			goHelp() {				
				window.open('/utils/docs/content/10410.html');
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.el-radio{
		width: 100%;
		margin-top: 10px;
	}
	.activity_promote {
		header {
			height: 100px;
			display: flex;
			align-items: center;
			padding-left: 68px;
			h2 {
				font-size: 38px;
				color: #000;
				font-weight: 400;
			}
			p {
				font-size: 24px;
				color: #666;
				margin-left: 40px;
			}
			span{
				font-size: 16px;
				color: #3ca0ec;
				margin-left: 20%;
				cursor: pointer;
				&:hover{
					text-decoration: underline;
				}
			}
		}
		.content {
			.store_lists1 {
				display: flex;
				flex-wrap: wrap;
				.store_list1 {
					width: 25%;
					height: 288px;
					border-bottom: 1px solid #f0f0f0;
					border-right: 1px solid #f0f0f0;
					position: relative;
					.overs {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						z-index: 100;
						background: rgba(0, 0, 0, .8);
						display: flex;
						flex-direction: column;
						align-items: center;
						h2 {
							font-size: 25px;
							color: #fff;
							font-weight: 400;
							margin: 24px 0 26px 0;
						}
						p {
							height: 65px;
							font-size: 14px;
							color: #fff;
							margin-bottom: 20px;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 3;
							-webkit-box-orient: vertical;
							padding: 0 18px;
							line-height: 22px;
						}
						button {
							width: 160px;
							height: 42px;
							line-height: 42px;
							border-radius: 5px;
							font-size: 16px;
							color: #fff;
							background: #1d8cea;
							z-index: 999;
							cursor: pointer;
							&:hover {
								text-decoration: underline;
							}
						}
						button:nth-of-type(2) {
							background: #60af2b;
							margin-top: 15px;
						}
					}
					>h6 {
						font-size: 24px;
						color: #000;
						font-weight: 400;
						margin: 25px 0 16px 0;
					}
					>p {
						height: 65px;
						font-size: 13px;
						color: #464646;
						margin-top: 4px;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
						padding: 0 18px;
						line-height: 22px;
					}
					>img {
						width: 100px;
						height: 100px;
						border-radius: 18px;
						margin-top: 42px;
					}
				}
			}
			.store_detail1 {
				.store_detail_top {
					display: flex;
					justify-content: space-between;
					padding: 38px 0 28px 72px;
					border-top: 1px solid #cdcdcd;
					border-bottom: 1px solid #cdcdcd;
					h1 {
						text-align: left;
						font-size: 34px;
						color: #000;
						font-weight: 500;
					}
				}
				.detail{
					text-align: left;	
					padding: 10px 30px;													
				}
			}
			.promote_lists1 {
				.store_info1 {
					img {
						width: 100px;
						height: 100px;
						border-radius: 15px;
					}
					p {
						display: flex;
						justify-content: center;
						margin: 16px 0 20px 0;
						span:nth-of-type(1) {
							font-size: 18px;
							color: #000;
						}
						span:nth-of-type(2) {
							font-size: 18px;
							color: #e88e00;
							margin-left: 34px;
							cursor: pointer;
							&:hover {
								text-decoration: underline;
							}
						}
					}
					h2 {
						font-size: 26px;
						color: #000;
						font-weight: 400;
					}
				}
				.switch_types1 {
					display: flex;
					justify-content: space-between;
					padding: 0 20px;
					margin: 44px 0;
					.switch_type1 {
						width: 32%;
						height: 175px;
						border: 1px solid #e2e2e2;
						cursor: pointer;
						img {
							width: 55px;
							height: 55px;
						}
						h5 {
							font-size: 18px;
							color: #000;
							font-weight: 400;
						}
						p {
							font-size: 13px;
							color: #878787;
						}
					}
					.selType1 {
						border-color: #0081d8;
					}
				}
				.promote_goods {
					display: flex;
					flex-wrap: wrap;
					.goods_list {
						width: 340px;
						height: 220px;
						position: relative;
						display: flex;
						justify-content: center;
						margin: 20px 0 0 30px;
						background: #fff;
						box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, .1);
						border-bottom: 2px solid #dbdbdb;
						border-radius: 5px;
						img {							
							height: 180px;
							margin-top: 5px;
						}
						.text {
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
							height: 35px;
							line-height: 35px;
							display: flex;
							justify-content: space-between;
							padding: 0 10px;
							p {
								font-size: 15px;
								color: #666;
							}
						}
						.goods_hover {
							position: absolute;
							top: .2rem;
							left: 50%;
							transform: translateX(-50%);
							width: 94%;
							height: 85%;
							background: rgba(0, 0, 0, .8);
							z-index: 999;
							display: flex;
							justify-content: center;
							align-items: flex-end;
							padding-bottom: 28px;
							button {
								width: 164px;
								height: 46px;
								line-height: 46px;
								font-size: 18px;
								color: #fff;
								background: #389fed;
								border-radius: 5px;
								z-index: 1000;
								&:hover {
									text-decoration: underline;
								}
							}
						}
					}
					.no_promote{
						width: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-top: 20px;
						img{
							width: 85px;
							height: 86px;
							margin: 30px 0 20px 0;
						}
						p{
							font-size: 14px;
							color: #999;
						}
					}
				}
				.show_join {
					.join_top {
						height: 145px;
						display: flex;
						justify-content: space-between;
						padding: 0 10px;
						border-bottom: 1px solid #dbdee3;						
						.join_top_left {
							display: flex;
							align-items: center;
							img {
								width: 100px;
								height: 100px;
								border-radius: 15px;								
							}
							p {
								width: 200px;
								overflow: hidden;
								text-overflow: ellipsis;
								font-size: 32px;
								color: #000;
							}
						}
						.join_top_right {
							display: flex;
							align-items: center;
							.join_time {
								.join_price {
									display: flex;
									align-items: center;
									p {
										font-size: 18px;
										color: #000;
										span {
											text-decoration: line-through;
										}
									}
									p:nth-of-type(2) {
										font-weight: 600;
										color: #3ca0ec;
										margin-left: 21px;
									}
								}
								.join_remain_time {
									margin-top: 15px;
									p {
										font-size: 18px;
										color: #000;										
									}
								}
							}
							button:nth-of-type(1) {
								width: 200px;
								height: 56px;
								line-height: 56px;
								background: #3097e6;
								font-size: 20px;
								color: #fff;
								border-radius: 5px;
								margin: 0 14px 0 28px;
								&:hover {
									text-decoration: underline;
								}
							}
							button:nth-of-type(2) {
								width: 56px;
								height: 56px;
								line-height: 56px;
								background: #fff;
								font-size: 20px;
								color: #3097e6;
								border: 1px solid #3097e6;
								border-radius: 5px;
								&:hover {
									text-decoration: underline;
								}
							}
						}
					}
					.join_details {
						display: flex;
						padding: 30px;
						.join_img{							
							img {
								width: 450px;
							}	
						}						
						.join_detail {
							padding-left: 20px;
							.join_infos {
								width: 450px;
								border-bottom: 1px solid #dbdee3;								
								p {
									font-size: 26px;
									color: #000;
									text-align: left;
									span {
										color: #666;
									}
								}
								p {
									margin-bottom: 32px;
								}
							}
							>div {
								>h5 {
									font-size: 26px;
									color: #3ca0ec;
									font-weight: 400;
									margin: 38px 0 30px 0;
								}
								.join_upload {
									text-align: left;
									.uploadI {
										width: 114px;
										height: 116px;
										cursor: pointer;
									}
									.have_img {
										img {
											width: 114px;
											height: 116px;
											cursor: pointer;
										}
									}
								}
							}
						}
					}
				}
			}
			.go_back1 {
				text-align: right;
				padding-right: 42px;
				margin-top: 26px;
				font-size: 17px;
				color: #3ca0ec;
				cursor: pointer;
				&:hover {
					text-decoration: underline;
				}
			}
		}
		.dialog_upload {
			width: 92%;
			height: 88px;
			margin: 0 auto;
			background: #f8f8f8;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			>img {
				width: 40px;
				height: 41px;
				margin-right: 10px;
			}
			.dialog_text {
				p {
					font-size: 18px;
					color: #233040;
				}
				span {
					font-size: 14px;
					color: #aaa;
				}
				.have_up_img {
					width: 88px;
					height: 88px;
				}
			}
		}
			
		.payments{		
			padding-bottom: 30px;		
			>p{
				width: 90%;
				margin: 0 auto;
				border-bottom: 1px solid #e5ebed;
				padding: 20px 0;
				margin-bottom: 20px;
				color: #36464e;
			}	
			.sel_payways{
				width: 90%;
				margin: 0 auto;
				display: flex;							
				align-items: center;
				justify-content: space-around;
				p{
					width: 188px;
					height: 62px;					
					border: 1px solid #e5ebed;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					cursor: pointer;										
					span:nth-of-type(1){
						font-size: 14px;
						color: #7f8a8e;
					}
					span:nth-of-type(2){
						font-size: 12px;
						color: #c3ccd2;
					}
				}
				.disable1{
					background: #f7fbfb;
					border: none;
					cursor: default;
				}			
			}			
		}	
		.payments_help{
			padding-bottom: 30px;
			.close{
				text-align: right;
				padding: 0 8px;
				img{
					cursor: pointer;
				}
			}
			>h5{
				width: 88%;
				margin: 0 auto;
				border-bottom: 1px solid #e4e4e3;
				padding: 20px 0;
				margin-bottom: 40px;
				font-size: 15px;
				color: #36464e;				
			}
			.pay_finish{
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 14px 0 20px 0;
				p{
					margin: 0 4px;
				}
				button{
					width: 98px;
					height: 38px;
					line-height: 38px;
					background: #46b3ff;					
					color: #fff;
					border: none;
					border-radius: 4px;
				}
			}
			.go_help{
				width: 40%;
				margin: 0 auto;
				display: flex;
				align-items: center;								
				p{
					color: #3299cd;
					cursor: pointer;
					&:hover{
						text-decoration: underline;
					}
				}
				span{
					width: 8px;
					height: 8px;
					border-top: 1px solid #3299cd;
					border-right: 1px solid #3299cd;
					transform: rotate(45deg);
				}
			}
		}
		.weixinTe{
			font-size: 20px;
			text-align: center;
			margin-bottom: 30px;
		}
		.weixin{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.select_imgs {
			text-align: left;
			h6 {
				font-size: 18px;
				color: #233040;
				font-weight: 400;
				margin: 20px 0 10px 15px;
			}
			.nav_lists{
				display: flex;
				flex-wrap: wrap;
				padding-bottom: 10px;
				.nav_list{					
					width: 70px;
					height: 40px;
					line-height: 40px;					
					text-align: center;
					margin-top: 8px;
					cursor: pointer;
					&:hover {
						color: #fff;
						background: #0aa770;
					}
				}
				.sel{					
					color: #fff;
					background: #0aa770;
				}
			}
			.model_datas {
				display: flex;
				flex-wrap: wrap;	
				justify-content: space-around;			
				padding-bottom: 20px;
				height: 450px;
				overflow: auto;
				.model_data {
					.model_img {
						position: relative;
						width: 200px;						
						margin: 15px 0 0 0;
						img {
							width: 200px;
							cursor: pointer;
						}
						.sel {
							width: 30px;
							height: 30px;
							position: absolute;
							right: 10px;
							top: 10px;
						}
					}
				}
				.no_goods {
					display: flex;
					justify-content: center;
					margin-top: 100px;								
				}
			}
			.img_datas {
				height: 350px;
				overflow: auto;
				.img_data {
					>p {
						display: flex;
						align-items: center;
						img {
							width: 6px;
							height: 22px;
							margin-right: 6px;
						}
						span {
							font-size: 20px;
							color: #adadad;
						}
					}
					.model_datas {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						padding-bottom: 20px;
						.model_data {
							.model_img {
								position: relative;
								width: 210px;
								margin-top: 10px;
								img {
									width: 210px;
									cursor: pointer;
								}
								.sel {
									width: 30px;
									height: 30px;
									position: absolute;
									right: 10px;
									top: 10px;
								}
							}
						}
					}
				}
			}
			.buttons {
				display: flex;
				justify-content: flex-end;
				button {
					width: 90px;
					height: 30px;
					line-height: 30px;
					border-radius: 6px;
					font-size: 14px;
					margin: 10px 15px 0 0;
				}
				button:nth-of-type(1) {
					background: #0099e9;
					color: #fff;
				}
				button:nth-of-type(2) {
					background: #fff;
					color: #333;
					border: 1px solid #ddd;
				}
			}
		}
	}	
</style>